var dom=document.getElementById('clock');
var ctx=dom.getContext('2d');

var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r =width / 2;
var k=width/200;

function drawBackground(){
     ctx.save();
	 ctx.translate(r,r);
     ctx.beginPath();
     ctx.lineWidth=10*k;
     ctx.arc(0,0,r-5*k,0,2*Math.PI,false);
     ctx.stroke();
	 
	 var hourNumber=[3,4,5,6,7,8,9,10,11,12,1,2];
	 ctx.font='18px Arial';
	 ctx.textAlign='center';
	 ctx.textBaseline='middle';
	 hourNumber.forEach(function(number,i){
		 var rad=(2*Math.PI/12)*i;
		 var x=Math.cos(rad)*(r-30*k);
		 var y=Math.sin(rad)*(r-30*k);
		 ctx.fillText(number,x,y);
		 });
     for(var i=0;i<60;i++){
		 var rad =(2*Math.PI/60)*i;
		 var x=Math.cos(rad)*(r-18*k);
		 var y=Math.sin(rad)*(r-18*k);
		 ctx.beginPath();
		 if(i%5===0){
			 ctx.fillStyle='#000';
			 ctx.arc(x,y,2*k,0,2*Math.PI,false);
			 }else{
			    ctx.fillStyle='#ccc';
				ctx.arc(x,y,2*k,0,2*Math.PI,false);	 
			 }
			 
		     ctx.fill();
	     }
}
function drawHour(minute,hour){
	ctx.save();
	ctx.beginPath();
	var rad=(2*Math.PI/12)*hour;
	var mrad=(2*Math.PI/12/60)*minute;
	ctx.rotate(rad+mrad);
	ctx.lineWidth=6*k;
	ctx.lineCap='round';
	ctx.moveTo(0,10*k);
	ctx.lineTo(0,-r/2);
	ctx.stroke();
	ctx.restore();
	}
function drawMinute(minute){
	ctx.save();
	ctx.beginPath();
	var rad=(2*Math.PI/60)*minute;
	ctx.rotate(rad);
	ctx.lineWidth=3*k;
	ctx.lineCap='round';
	ctx.moveTo(0,10*k);
	ctx.lineTo(0,-r+30*k);
	ctx.stroke();
	ctx.restore();
	}
function drawSecond(second){
	ctx.save();
	ctx.beginPath();
	var rad=(2*Math.PI/60)*second;
	ctx.rotate(rad);
	
	ctx.fillStyle='red';
	ctx.moveTo(-3*k,10*k);
	ctx.lineTo(3*k,10*k);
	ctx.lineTo(0,-r+18*k);
	ctx.lineTo(-3*k,10*k);
	ctx.fill();
	ctx.restore();
	}

function drawDot(){
	ctx.beginPath();
	ctx.fillStyle='#fff';
	ctx.arc(0,0,2*k,0,2*Math.PI);
	ctx.fill();
	
	}

function draw(){
	ctx.clearRect(0,0,width,height);
	var now =new Date();
	var hour =now.getHours();
	var minute=now.getMinutes();
	var second=now.getSeconds();
	drawBackground();
    drawMinute(minute);
    drawHour(minute,hour);
    drawSecond(second);
    drawDot();
	ctx.restore();
	}
draw();
setInterval(draw,1000);
